
<!-- 工作明细列表 -->
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-tasks"></i> 工作明细列表</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="workDetailsTable">
        <thead>
                    <tr class="bg-primary">
                     
                        <th width="8%" class="text-center">序号</th>
                        <th width="35%" class="text-center">工作名称</th>
                        <th width="20%" class="text-center">当前工作人员</th>
                        <th width="12%" class="text-center">状态</th>
                        <th width="25%" class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
            {if condition="isset($row.jobs) && !empty($row.jobs)"}
                {volist name="row.jobs" id="job"}
                    <tr>
              
                        <td class="text-center">{$i}</td>
                        <td>{$job.title}</td>
                        <td class="text-center">{$job.worker_name|default='未分配'}</td>
                        <td class="text-center">
                            {switch name="job.status"}
                                {case value="0"}
                                    <span class="label label-default">待处理</span>
                                {/case}
                                {case value="1"}
                                    <span class="label label-warning">进行中</span>
                                {/case}
                                {case value="2"}
                                    <span class="label label-success">已完成</span>
                                {/case}
                                {default /}
                                    <span class="label label-info">未知</span>
                            {/switch}
                        </td>
                        <td class="text-center">
                            
                            {if condition="$job.status == 0"}
                                <button class="btn btn-xs btn-info" onclick="assignJob({$job.id}, event); return false;">分配</button>
                            {/if}
                            <button class="btn btn-xs btn-primary" onclick="viewJob({$job.id}, event); return false;">详情</button>
                        </td>
                    </tr>
                {/volist}
            {else /}
                <tr>
                    <td colspan="5" class="text-center text-muted">暂无工作明细数据</td>
                </tr>
            {/if}
        </tbody>
       </table>
        </div>
        
        <!-- 分页信息 -->
        <!-- <div class="row">
            <div class="col-md-6">
                <div class="dataTables_info">
                    显示第 1 到 17 条，共 17 条记录
                </div>
            </div>
            <div class="col-md-6">
                <div class="dataTables_paginate paging_bootstrap">
                    <ul class="pagination">
                        <li class="prev disabled"><a href="#">上一页</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li class="next disabled"><a href="#">下一页</a></li>
                    </ul>
                </div>
            </div>
        </div> -->
    </div>
</div>

<!-- 分配工作弹窗 -->
<div class="modal fade" id="assignModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 50%; margin: 50px auto;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><i class="fa fa-user-plus"></i> 分配工作</h4>
            </div>
            <div class="modal-body" style="max-height: 450px; overflow-y: auto; padding: 15px 30px;">
                <form id="assignForm">
                    <!-- 隐藏工作ID字段 -->
                    <input type="hidden" id="assignJobId">
                    
                    <div class="form-group">
                        <label class="control-label"><i class="fa fa-tasks"></i> 工作名称：</label>
                        <input type="text" class="form-control" id="assignJobTitle" readonly style="background-color: #f5f5f5;">
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label"><i class="fa fa-edit"></i> 工作内容：</label>
                        <textarea class="form-control" id="jobContent" rows="3" placeholder="请填写具体的工作内容和要求..." style="resize: vertical;"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label"><i class="fa fa-user"></i> 分配给：</label>
                        <select class="form-control" id="assignToUser">
                            <option value="">请选择工作人员</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label"><i class="fa fa-comment"></i> 备注：</label>
                        <textarea class="form-control" id="assignRemark" rows="3" placeholder="可填写备注信息..." style="resize: vertical;"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <i class="fa fa-times"></i> 取消
                </button>
                <button type="button" class="btn btn-primary" onclick="Controller.submitAssign()">
                    <i class="fa fa-check"></i> 确认分配
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* 分配弹窗样式优化 - 紧凑布局 */
#assignModal .modal-dialog {
    margin: 50px auto;
}

#assignModal .form-group {
    margin-bottom: 12px;
}

#assignModal .control-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    font-size: 13px;
}

#assignModal .form-control {
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 6px 10px;
    font-size: 13px;
}

#assignModal .form-control:focus {
    border-color: #3c8dbc;
    box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.2);
}

#assignModal .btn {
    padding: 5px 15px;
    border-radius: 0;
    font-size: 13px;
}

#assignModal .btn-primary {
    background-color: #3c8dbc;
    border-color: #357ca5;
}

#assignModal .btn-primary:hover {
    background-color: #357ca5;
    border-color: #2e6da4;
}
</style>